<template>
  <div class="brush-wrap">
    <div class="brush">
      <p class="text">画笔大小</p>
      <div class="slider">
        <van-slider :value="brushSize" :min="min" max="10" @change="onChange" @drag="onDrag" bar-height="8" />
      </div>
    </div>
    <div class="desc">{{ tip }}</div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
// import {resultImgUpload} from '@/api/painting';
const props = defineProps({
  brushSize: {
    type: Number,
    default: 5
  },
  tip: {
    type: String,
    default: '涂抹图片中不想要的部分，然后点击消除即可'
  },
  min: {
    type: Number,
    default: 1
  }
})
const emit = defineEmits(['c'])
const brushSize = ref(5);
const onChange = (e) => {
  console.log('onChange', e.detail);
  brushSize.value = e.detail;
  emit('setBrushSize', brushSize.value)
}
const onDrag = (e) => {

  console.log('onDrag-e', e.detail.value);
  brushSize.value = e.detail.value
  emit('setBrushSize', brushSize.value)
}
function uploadImageToServer() {

}
</script>

<style lang="less" scoped>
.brush-wrap {
  color: var(--a-two-text-color);

}

.brush {
  display: flex;
  align-items: center;
  margin-top: 32rpx;

  .text {
    font-size: 26rpx;

    margin-right: 20rpx;
  }

  .slider {
    flex: 1;
  }
}

.desc {
  margin-top: 24rpx;
  text-align: center;
  font-size: 24rpx;
}
</style>